import { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Image } from '@tarojs/components'
import { staticUrl, encryptMobile } from '@/utils'
import { connect } from 'react-redux'
import Iconfont from '@/components/Iconfont'
import { staffInfo } from '@/api/topush'
import { loginMethod } from '@/utils/login'
import './index.scss'

const avatar = staticUrl('/img/user/avatar-pic.png')
interface State{
    info: any
    loaded: boolean
}

@connect<any>(({ user }) => ({ user }))
export default class Index extends Component<any> {
    $instance = getCurrentInstance();

    constructor () {
        super(...arguments)
        this.state = {
            info: null,
            loaded: false
        }
    }

    state: State

    UNSAFE_componentWillMount() { }
    componentDidMount() {
        this.staffInfo()
    }
    UNSAFE_componentWillReceiveProps(nextProps, nextContext) { }
    componentWillUnmount() { }
    componentDidShow() { }
    componentDidHide() { }
    componentDidCatchError() { }
    componentDidNotFound() { }
    tabLogin() {
        const pages = Taro.getCurrentPages()
        const route = pages[pages.length - 1].route
        Taro.setStorageSync('BACK_ROUTE', route)
        Taro.redirectTo({
            url: '/pages/user/login/index'
        })
    }
    qrcodePage() {
        const { info } = this.state
        if (info.storeCode) {
            Taro.redirectTo({
                url: `/pages/topush/qrcode/index?msg=${JSON.stringify(info)}`
            })
        } else {
            Taro.showModal({
                title: '提示',
                content: '请选择门店',
                success: res => {
                    if (res.confirm) {
                        this.tabStore()
                        // Taro.navigateTo({ url: '/pages/topush/store/index' })
                    }
                }
            })
        }
    }
    staffInfo() {
        let { mobile } = this.props.user.userInfo
        if (mobile) {
            staffInfo({
                mobile
            }).then(res => {
                const data = res?.data.data
                const { isTab } = this.$instance.router?.params
                const staffStore = Taro.getStorageSync('STAFF_STORE')
                if (staffStore) {
                    Object.assign(data, {
                        storeCode: staffStore.storeCode,
                        storeName: staffStore.storeName
                    })
                }
                if (!data.isStaff){
                    Taro.setNavigationBarTitle({
                        title: '暂无权限'
                    })
                }
                if (data.status && !isTab) {
                    Taro.redirectTo({
                        url: `/pages/topush/qrcode/index?msg=${JSON.stringify(data)}`
                    })
                    return
                }
                this.setState({
                    info: data,
                    loaded: true
                })
            })
        } else{
            this.setState({
                loaded: true
            })
        }
    }
    tabStore() {
        const { info } = this.state
        const storeCode = info.storeCode
        Taro.navigateTo({
            url: `/pages/topush/store/index?vendorCode=${info.vendorCode}&storeCode=${storeCode}`
        })
    }
    render() {
        const { info, loaded } = this.state
        return info ? (
            <View className='topush-main'>
                <Image className='bg-pic' mode='widthFix' src={staticUrl('/img/topush/top-bg.png')}></Image>
                {
                    info && info.isStaff == 1 ? (
                        <View className='is-staff'>
                            <View className='name'>{info.vendorName}</View>
                            <View className='view-block'>
                                <View className='user-info'>
                                    <View className='pic'><Image className='img-pic' src={avatar}></Image></View>
                                    <View className='user-msg'>
                                        <View className='staff-name'>{info.staffName}</View>
                                        <View className='mobile'>{encryptMobile(info.mobile)}</View>
                                    </View>
                                </View>
                                <View className='store-info' onClick={() => this.tabStore()}>
                                    <View className='store-title'>门店</View>
                                    <View className='store-name'>
                                        {info.storeName}
                                        <View className='icon'><Iconfont color='#666666' size='20' name='icon-jiantourukou' /></View>
                                    </View>
                                </View>
                            </View>
                            <View className='fixed-bt' onClick={() => this.qrcodePage()}>
                                <View className='btn'>查看专属二维码</View>
                            </View>
                        </View>
                    ) : (
                        <View className='auth-err'>
                            <View className='view-block'>
                                <View className='user-info'>
                                    <View className='pic'><Image className='img-pic' src={avatar}></Image></View>
                                    <View className='mobile'>{info.mobile}</View>
                                    <View className='tab-user' onClick={() => loginMethod()}>切换账号</View>
                                </View>
                            </View>
                            <View className='tips'>
                                <View className='pic'><Image className='tips-pic' src={staticUrl('/img/topush/auth-icon.png')}></Image></View>
                                <View className='text-tips'>当前账号无相关人员信息，暂无权限</View>
                            </View>
                        </View>
                    )
                }
            </View>
        ) : loaded && (
            <View className='topush-main'>
                <Image className='bg-pic' mode='widthFix' src={staticUrl('/img/topush/top-bg.png')}></Image>
                <View className='auth-err'>
                    <View className='view-block'>
                        <View className='user-info' onClick={() => loginMethod()}>
                            <View className='pic'><Image className='img-pic' src={avatar}></Image></View>
                            <View className='mobile'>去登录</View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}
